<template>
	<view class="record-list flex--col">
		<view class="record-scroll">
			<view class="record-scroll-content  flex--col" :style="{'transform':'translateY('+offset+'%)'}">
					<RecordFlag>
						<template #flag-desc>
							<text class="text--secondary-dark">碰面成功</text>
						</template>
						<template #flag-icon>
							<image aria-label="碰面成功" src="@/static/ongoing/start.svg" class="icon"></image>
						</template>
					</RecordFlag>
					
					<RecordItem v-for="(spot,index) in spots" :key="spot.id" 
					:record="spot"
					:active="index === curSpot+1" @checkSpot="handleCheckSpot(index)"></RecordItem>
			
					<RecordFlag>
						<template #flag-desc>
							<text class="text--secondary-dark">出行完成</text>
						</template>
						<template #flag-icon>
							<image aria-label="出行完成" src="@/static/ongoing/bell.svg" class="icon"></image>
						</template>
					</RecordFlag>	
			</view>
		</view>
		
		<view class="record-item-info">
			<text class="text--thirdary-dark">{{curSpotInfo}}</text>
		</view>
		
	</view>
	
</template>


<script>
	import RecordItem from "./RecordItem.vue"
	import RecordFlag from "./RecordFlag.vue"
	import * as TravelingApi from "@/api/traveling/traveling.js"
	
	export default{
		components:{
			RecordItem,
			RecordFlag
		},
		emits:['recordSpot'],
		props:['spots','curSpot'],
		computed:{
			curSpotInfo(){
				if(!this.spots || this.spots.length == 0){
					return ""
				}
				const info = this.spots[this.curSpot + 1]?.description ?? "出行结束"
				return info
			},
			offset(){
				if(this.curSpot === -1){
					return 0
				}else{
					return -1*(20+this.curSpot*45)
				}
			}
		},
		methods:{
			async handleCheckSpot(index){
				const spot = this.spots[index]
				if(this.curSpot+1 !== index){
					this.$confirm({content:"请按照顺序对景点打卡！"})
					return
				}
				this.$emit('recordSpot',index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 500;
		color:#333;
	}
	
	.record-list{
		width: 100%;
		gap:24px;
	}
	
	.record-scroll{
		overflow-y: clip;
		&-content{
			height:420rpx;
			transition: transform 1s;
			width: 100%;
			gap:24px;
		}
	}
	
	
	.record-item-info{
		text-align: center;
	}
	
	
</style>